<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>记忆课堂第三课练习题</title>
  <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <style>
    .wenda-area {
      padding: 20px 0px;
    }
    .wenda-area .wenda-item {
      padding: 10px 0;
      line-height: 35px;
      //border-bottom: 1px #eee solid;
    }
    
    .wenda-area .order .number {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: #6cf;
      border-radius: 15px;
      color: #fff;
    }
  </style>
</head>
<body>
  
  <div id="app">
    <div class="bar clearfix">
      <div class="container">
        <div class="pull-left">
          <a href="javascript:void(0)" @click="back"><span class="back">Back</span></a>
        </div>
        <span class="bar-en">memory class</span>
        <div class="user-box pull-right">
          <a :href="'/user/center.html?id=' + userInfo.id" v-if="logined">
            <span class="user-name">{{userInfo.name.slice(0,2)}}</span>
          </a>
          <a href="/loginPage" v-if="!logined">
            <span class="my-btn">登陆</span>
          </a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-md-offset-3" >
      <div class="topicInfo clearfix">
        <h4 class="text-center ">{{topic.name}}</h4>
        <p class="description col-md-10 col-md-offset-1 text-muted">
          此练习题是由 <strong class="text-primary">{{topic.autor}}</strong> 所出,习题类型为 <strong>{{topicType[topic.type - 1]}}</strong>,
          答题类型为 <strong>{{topic.daType == 1 ? '判断题': '自由答题'}}</strong>,如有发现习题有非法内容或题目不明确,请及时联系站长,联系方式位于页脚。
        </p>
      </div>
      <div class="clearfix wenda-area">
        <div class="wenda-item row" v-for="(item, index) in topic.content">
          <span class="order col-md-12 col-xs-12 text-center">
            <span class="number">{{index + 1}}</span>
          </span>
          <div class="col-md-12 col-xs-12">
            <span class="col-md-2 col-xs-2">问：</span>
            <span class="col-md-10 col-xs-10">{{item.wen}}</span>
            <span class="col-md-2 col-xs-2">答：</span>
            <span class="col-md-10 col-xs-10">
              <select class="form-control" v-model="item.da" v-if="topic.daType == 1">
                  <option value="true">true</option>
                  <option value="false">false</option>
                </select>
                <input type="text" v-if="topic.daType == 2" v-model="item.da" class="form-control">
            </span>
          </div>

        </div>

        <div class="row">
          <div class="remark col-md-12 col-xs-12">
            <div class="col-md-10 col-md-offset-2">
              <textarea name="" id="" class="form-control" v-model="topic.remark" placeholder="请写出对这份题的感受"></textarea>
            </div>
          </div>
        </div>
        
      </div>
      <div class="co-md-6 text-right mr-15" >
        <button v-if="canEdit" class="btn btn-primary" @click="submit">提交</button>
      </div>
      
    </div>
    
  </div>

  
  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script>
    Vue.use(VueResource)
    new Vue({
      el: '#app',
      data: {
        topic: {remark: ''},
        topicType: ['IT知识', '生活常识', '问卷调查'],
        logined: false,
        userInfo: {
          name: '',
          id: ''
        },
        canEdit: true
      },
      mounted: function () {
        //  判断是否登录
        var user = localStorage.memoryClassUser
        if (user) {
          this.logined = true
          this.userInfo = JSON.parse(user)
        } 

        //  获取习题内容
        
        var query = Util.getQuery()

        var queryObj = {}
        if (query.type == 2) {
          queryObj = {
            params: {
              userId: query.userId
            }
          }
        }

        this.$http.get('/test/type/' + query.type + '/id/' + query.id, queryObj).then(function (res) {
          if (res.data.code == 100) {
            res.data.data.test.remark = res.data.data.test.remark || ''
            this.topic = res.data.data.test
            if (query.type != 1) {
              this.canEdit = false
            }
          } else {
            alert(res.data.msg)
          }
        })
      },
      methods: {
        submit: function () {
          if (!this.logined) {
            return alert('请登录！')
          }
          if (!this.check()) {
            return alert('做试卷不要留白！')
          }
          console.log(this.topic)
          var topic = $$.extend({}, this.topic, {autor: this.userInfo.name})

          this.$http.post('/test/newTest/type/2', {content: topic, userId: this.userInfo.id}).then(function (res) {
            if (res.data.code == 100) {
              alert('提交成功!')
              history.back()
            } else {
              alert('出了问题。。。')
            }
          })
        },
        back: function () {
          history.back()
        },
        //  检查试卷答题是否完整
        check: function () {
          var content = this.topic.content
          for (var i = 0; i < content.length; i ++) {
            if (content[i].da == '') {
              return false
            }
          }
          return true
        }
      }
    })

  </script>
</body>
</html>